<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    #a:hover {
       fill: teal !important;
    }
  </style>
</head>
<body>
  <!-- svg在html中使用
  1、svg修改颜色和大小
        修改颜色：fill属性 - hover也可以操作，注意优先级
                 path上的fill属性也可以改颜色，优先级比较高
                 如果发现svg加填充颜色没有用 可能ui设计的时候把path设置了颜色
        修改大小：不能直接改width和height 需要另外个属性辅助 viewbox
                    viewBox 属性允许指定一个给定的一组图形伸展以适应特定的容器元素。
                    viewBox="0 0 100 100" 
                    4 个参数的列表 min-x, min-y, width and height，以空格或者逗号分隔开       
  -->
  <!-- 第一种:直接用img引入 -->
  <img src="../src/icons/svg/dashboard.svg" alt="">
  <!-- 第二种使用 -->
<svg id="a" style="fill: pink" width="228" height="164" viewbox="0 0 128 64" xmlns="http://www.w3.org/2000/svg"><path d="M127.072 7.994c1.37-2.208.914-5.152-.914-6.87-2.056-1.717-4.797-1.226-6.396.982-.229.245-25.586 32.382-55.74 32.382-29.24 0-55.74-32.382-55.968-32.627-1.6-1.963-4.57-2.208-6.397-.49C-.17 3.086-.399 6.275 1.2 8.238c.457.736 5.94 7.36 14.62 14.72L4.17 35.96c-1.828 1.963-1.6 5.152.228 6.87.457.98 1.6 1.471 2.742 1.471s2.284-.49 3.198-1.472l12.564-13.983c5.94 4.416 13.021 8.587 20.788 11.53l-4.797 17.418c-.685 2.699.686 5.397 3.198 6.133h1.37c2.057 0 3.884-1.472 4.341-3.68L52.6 42.83c3.655.736 7.538 1.227 11.422 1.227 3.883 0 7.767-.49 11.422-1.227l4.797 17.173c.457 2.208 2.513 3.68 4.34 3.68.457 0 .914 0 1.143-.246 2.513-.736 3.883-3.434 3.198-6.133l-4.797-17.172c7.767-2.944 14.848-7.114 20.788-11.53l12.336 13.738c.913.981 2.056 1.472 3.198 1.472s2.284-.49 3.198-1.472c1.828-1.963 1.828-4.906.228-6.87l-11.65-13.001c9.366-7.36 14.849-14.474 14.849-14.474z"/></svg>

</body>
</html>